<template>
	<!-- 添加订单信息 -->
	<view>
		<view class="container">
			<view class="botsny">
				<view class="box">
					<view class="leix">
						<view class="text1">类型</view>
						<!-- <view class="xlcd" v-model="add.category">
							<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false"
								:isCanInput="true" :style_Container="'height: 30px; font-size: 15px;'"
								:selectHideType="'hideAll'">
							</xfl-select>
						</view> -->

						<view class="xlcd">
							<radio-group name="radio" @change="check">
								<label>
									<radio value="0" /><text>动物</text>
								</label>
								<label>
									<radio value="1" /><text>植物</text>
								</label>
							</radio-group>
						</view>
					</view>
				</view>
			</view>
			<view class="botsny">
				<view class="box">
					<view class="leix">
						<view class="text1">症状开始时间</view>
						<view class="uni-title">选时间：</view>
						        <view class="uni-list">
						            <view class="uni-list-cell">
						                <view class="uni-list-cell-db">
						                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						                        <view class="uni-input">{{date}}</view>
						                    </picker>
						                </view>
						            </view>
						        </view>
					</view>
				</view>
				
			</view>

			<view class="botsny">
				<view class="box">
					<view class="leix2">
						<textarea class="text2" placeholder="请在此处填写描述症状,以往的检查或治疗情况,以及想咨询医生的具体问题"
							v-model="add.description"></textarea>
					</view>
				</view>
			</view>

			<view class="botsny">
				<view class="box">
					<view class="leix3">
						<view class="text1">上传能体现病情的病例，资料或患处照片等</view>
					</view>
				</view>
			</view>

			<view class="botsny">
				<view class="box">
					<view class="leix4">
						<image class="logo-img" src="../../static/uni-center/tjtp.png" @click="chim" v-model="add.img">
						</image>
					</view>
				</view>
			</view>
			<view class="botsny">
				<view class="box">
					<view class="leix5">
						<image class="xs-img" :src="add.img" @tap="_prev(add.img)"></image>
					</view>
				</view>
			</view>

		</view>

		<view>
			<button class="butt-tj" @click="addtj">提交</button>
		</view>
	</view>
</template>

<script>
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	export default {
		data() {
			 const currentDate = this.getDate({
			            format: true
			        })
			return {
				show: false,
				login: false,
				avatarUrl: "../../static/uni-center/logo.png",
				list: {},
				add: {
					category:'',
					customerId:'',
					description:'',
					doctorId:'',
					img:'',
					startTime:''
				},
				components: {
					xflSelect
				},
			
				date: 1111-11-11,

			}
		},
		created(){
			this.info()
		},
		
		onLoad:function(option) {
						this.add.doctorId=option.aaa
					},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },			
		methods: {
			check(e){
				this.add.category=e.detail.value
			},
			addtj() {
				//提交表单
				console.log(this.add)
				uni.request({
					url: 'http://localhost:8099/serviceuser/information/addOrders',
					method: 'POST',
					data: this.add,
					success: (res) => {
						console.log(res.data.data.data.ordersId)
						uni.reLaunch({
							url:'../list/yuyue1?ordersId='+res.data.data.data.ordersId
						})
						//this.doctor = res.data.data.list
						// console.log(this.doctor)
					}
				})
				
				// uni.request({
				// 	url: 'http://localhost:8099/serviceuser/information/addInformation',
				// 	method: 'POST',
				// 	data: this.add,
				// 	success: (res) => {
				// 		console.log(res.data.data.data.ordersId)
				// 		uni.reLaunch({
				// 			url:'../list/yuyue1?ordersId='+res.data.data.data.ordersId
				// 		})
				// 		//this.doctor = res.data.data.list
				// 		// console.log(this.doctor)
				// 	}
				// })
				
			
			},
			info(){
				//根据token获取登录者id
				uni.getStorageSync("token")
				uni.request({
					url:'http://localhost:8081/serviceedu/login/getCustomerInfo',
					method:'GET',
					header:{token:uni.getStorageSync("token")},
					success:(res)=>{
						console.log(res.data.data.Customer.customerId)
						this.add.customerId=res.data.data.Customer.customerId
					}
				})
			},
			ysxi() {
				uni.reLaunch({
					url: './doctor'
				})
			},
			zxzx() {
				uni.reLaunch({
					url: './addpage'
				})
			},
			chim() {
				//上传图片
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							// url: 'http://localhost:8099/oss/uploadApp', 
							url: 'http://localhost:8099/oss/uploadAppImg',//仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',

							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								this.add.img = uploadFileRes.data
							}
						});
					}
				});

				// uni.chooseImage({
				// 	//只能上传五张
				// 	count:3,
				// 	success:res=>{
				// 		console.log(res)
				// 		this.imgArr=res.tempFilePaths
				// 	}
				// })
			},
			//预览图片
			_prev(image){
				var imgArr=[];
				imgArr.push(image);
				
				uni.previewImage({
					urls:imgArr,
					current:imgArr[0]
				})
			},
			 bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.index = e.target.value
			        },
			        bindDateChange: function(e) {
			            this.date = e.target.value
						this.add.startTime=this.date
			        },
			        bindTimeChange: function(e) {
			            this.time = e.target.value
			        },
			        getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.container {
		/* 定义容器 */
		display: flex;
		/* 设置容器排列方向 */
		flex-direction: column;
		height: 100%;
		justify-content: space-around;
	}

	.botsny {
		/* background-color: blue; */
		height: 30px;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-bottom: 10rpx;
		/* border: 1upx solid #7e7e7e; */
	}

	.logo-img {
		width: 130upx;
		height: 130upx;
		/* 		border-radius: 200upx; */
		left: 50px;
		/* top: 15px; */
	}

	.xs-img {
		width: 350upx;
		height: 200upx;
		top: 5px;
		margin-left: 50px;
	}

	.box {
		border: lupx solid #333333;
		height: 100%;
		width: 90%;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-left: 12px;

	}

	.leix {
		font-size: 30upx;
		flex: 1;
		height: 100upx;
		display: flex;
		border: 1upx solid #FFFFFF;
		align-items: center;
		background-color: #98c7c3;
		border-radius: 5px;
		margin-left: 15px;
	}

	.leix2 {
		font-size: 30upx;
		flex: 1;
		height: 350upx;
		display: flex;
		border: 1upx solid #FFFFFF;
		align-items: center;
		background-color: #98c7c3;
		border-radius: 5px;
		margin-left: 15px;
	}

	.leix3 {
		font-size: 20upx;
		flex: 1;
		height: 350upx;
		display: flex;
		border: 1upx solid #FFFFFF;
		align-items: center;
		/* background-color: #c7c766; */
		border-radius: 5px;
		margin-left: 15px;
		margin-top: 150px;
	}

	.leix4 {
		font-size: 10upx;
		flex: 1;
		height: 350upx;
		display: flex;
		border: 1upx solid #FFFFFF;
		/* background-color: #c7c766; */
		border-radius: 5px;
		margin-top: 150px;
	}

	.leix5 {
		font-size: 10upx;
		flex: 1;
		height: 350upx;
		display: flex;
		border: 1upx solid #FFFFFF;
		/* background-color: #c7c766; */
		border-radius: 5px;
		margin-top: 180px;
	}

	.text1 {
		margin-left: 30px;
	}

	.text2 {
		margin-top: 20px;
		margin-left: 4px;
		text-indent: 22px;
		/* background-color: #000066; */
	}

	.xlcd {
		width: 120px;
		margin-left: 120px;
	}

	.butt-tj {
		margin-top: 90%;
		margin-left: 25%;
		width: 50%;
		background-color: #8bcbaf;
		color: #ffffff;
		border-radius: 20upx;
	}
	
	.uni-title{
		margin-left: 50px;
	}
	
	.uni-input{
		background-color: #ffffff;
	}
</style>
